﻿import QtQuick
import QtQuick.Controls.Basic

Switch {
    id: control
    width: 64
    height: rect_outoutside.height

    property int duration: 130

    indicator: Rectangle {
        id: rect_outoutside
        width: control.width
        height: 26
        implicitWidth: control.width
        color: control.checked ? "#dfffef" : "#E0E0E0"
        border.color: control.checked ? "#86dbce" : "#E0E0E0"
        radius: 13


        Rectangle {
            id: rect_outside
            implicitWidth: rect_outoutside.width - 10
            implicitHeight: 24
            anchors.centerIn: parent
            radius: 13
            color: "transparent" //control.checked ? "#dfffef" : "#E0E0E0"
            // border.color: control.checked ? "#86dbce" : "#E0E0E0"
            state: "closed"

            Rectangle {
                id: rect_inside
                anchors.verticalCenter: parent.verticalCenter
                radius: rect_outside.radius
                color: control.checked ? "#ffffff" : "#F2F2F2"
                border.color: "#f2f2f2"
                state: "small"

                states: [
                    State {
                        name: "big"
                        PropertyChanges { target: rect_inside; width: 18; height: 18 }
                    },
                    State {
                        name: "small"
                        PropertyChanges { target: rect_inside; width: 12; height: 12 }
                    }
                ]
                transitions: [
                    Transition {
                        PropertyAnimation { properties: "width,height"; duration: control.duration }
                    },
                    Transition {
                        PropertyAnimation { properties: "width,height"; duration: control.duration }
                    }
                ]
            }

            states: [
                State {
                    name: "opened"
                    AnchorChanges { target: rect_inside; anchors.right: rect_outside.right }
                    PropertyChanges { target: rect_outoutside; color: "#dfffef" }
                },
                State {
                    name: "closed"
                    AnchorChanges { target: rect_inside; anchors.left: rect_outside.left }
                    PropertyChanges { target: rect_outoutside; color: "#E0E0E0" }
                }
            ]
            transitions: [
                Transition {
                    AnchorAnimation { duration: control.duration }
                    PropertyAnimation { property: "color"; duration: control.duration }
                },
                Transition {
                    AnchorAnimation { duration: control.duration }
                    PropertyAnimation { property: "color"; duration: control.duration }
                }

            ]
        }
    }

    onCheckedChanged: {
        rect_outside.state = checked ? "opened" : "closed"
    }

    onDownChanged: {
        rect_inside.state = down ? "big" : "small"
    }

}
